<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Ant Design Vue Tree Checkbox</title>
    <!-- 引入 Ant Design Vue 的样式文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ant-design-vue/2.2.6/antd.min.css">
</head>

<body>
<div id="app">
    <div>
            <a-tree
                    :treeData="treeData"

            >
<!--                <template slot-scope="{ treeData: treeNode, isLeaf }">-->
<!--                  <span >{{ treeNode && treeNode.title }}</span>-->
<!--                </span>-->
<!--                </template>-->
            </a-tree>
    </div>
</div>

<!-- 引入 Vue 和 Ant Design Vue 的脚本文件 -->
<script src="./vue.js"></script>
<script src="./antd.min.js"></script>

<script>
  const { Tree, Checkbox } = window['antd'];


  new Vue({
    el: '#app',
    data() {
      return {
        a: '22',
        treeData: [
          {
            title: '父节点1',
            key: '0-0',
            children: [
              { title: '子节点1', key: '0-0-0' },
              { title: '子节点2', key: '0-0-1' },
            ],
          },
          {
            title: '父节点2',
            key: '0-1',
            children: [
              { title: '子节点3', key: '0-1-0' },
              { title: '子节点4', key: '0-1-1' },
            ],
          },
        ],
        checkedKeys: [],
      };
    },
    methods: {
      handleCheck(checkedKeys) {
        this.checkedKeys = checkedKeys;
        this.updateParentCheckState(this.treeData);
      },
      updateParentCheckState(nodes) {
        nodes.forEach(node => {
          if (node.children && node.children.length > 0) {
            const childCheckedCount = node.children.filter(child => this.checkedKeys.includes(child.key)).length;
            if (childCheckedCount === 0) {
              node.checked = false;
              node.indeterminate = false;
            } else if (childCheckedCount === node.children.length) {
              node.checked = true;
              node.indeterminate = false;
            } else {
              node.checked = true;
              node.indeterminate = true;
            }
          }
        });
      },
      changeCheck(node) {
        if (!node.children || node.children.length === 0) {
          return;
        }
        if (node.indeterminate || !node.checked) {
          this.checkAllChildren(node.children);
          node.indeterminate = false;
          node.checked = true;
        } else {
          this.uncheckAllChildren(node.children);
          node.checked = false;
        }
        this.updateParentCheckState(this.treeData);
      },
      checkAllChildren(children) {
        children.forEach(child => {
          this.checkedKeys.push(child.key);
          if (child.children && child.children.length > 0) {
            this.checkAllChildren(child.children);
          }
        });
      },
      uncheckAllChildren(children) {
        children.forEach(child => {
          const index = this.checkedKeys.indexOf(child.key);
          if (index > -1) {
            this.checkedKeys.splice(index, 1);
          }
          if (child.children && child.children.length > 0) {
            this.uncheckAllChildren(child.children);
          }
        });
      },
    },
    components: {
      'a-tree': Tree,
      'a-checkbox': Checkbox,
    },
  });
</script>

<!-- 自定义的 CSS 样式 -->
<style>
    /* Add any custom styles here */
</style>
</body>

</html>
